<script lang="ts">
	import { classMap } from '@smui/common/internal';
	let className = '';

	export let value = '';
	export let style = '';
	export { className as class };
</script>

<div class={classMap({ [className]: true, 'dhx-input': true })} {style}>
	<input name="username" bind:value {...$$restProps} />
</div>

<style lang="scss">
	.dhx-input {
		position: relative;
		width: fit-content;
		height: 50px;
		border: none;
		font-size: 16px;
		color: #333;
		background-color: transparent;
		border-bottom: 1px solid rgba(0, 0, 0, 0.36);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: calc(100% - 1px);
			background: transparent;
			transition: all 0.3s ease;
			border-bottom: 2px solid transparent;
			z-index: 1;
		}

		&:focus-within {
			&::before {
				border-bottom-color: var(--mdc-theme-primary);
			}
		}

		input {
			position: absolute;
			z-index: 2;
			border: none;
			outline: none;
			padding: 15px 12px 13px 12px;
			background: transparent;
			width: 100%;
			top: 0;
			left: 0;
			height: calc(100% - 1px);
			font-size: 16px;
			color: #333;
		}
	}
</style>
